<template>
  <div class="sopmake-preview-page" 
    style="display: flex;
    flex-direction: column;
    width: 1128px;
    min-height: 760px;
    border-right: 1px solid #888;
    border-left: 1px solid #888;
    border-bottom: 1px solid #888;
    page-break-before: auto;
    page-break-after: always;
    overflow: hidden;"
  >
    <div class="sopmake-preview-page__title">
      <pageHead :product-name="productName" :options="options" :index="index" :length="length"></pageHead>
    </div>
    <div class="sopmake-preview-page__content" style="display: flex; flex: 1;">
      <div class="sopmake-preview-page__content-left" style="width: 50%;display: flex;flex-direction: column;">
        <material id="bomData" v-if="optionsNew.bomData && optionsNew.bomData.length > 0" :table-data="optionsNew.bomData" />
        <device id="sourceData" v-if="optionsNew.sourceData && optionsNew.sourceData.length > 0" :table-data="optionsNew.sourceData" />
        <program id="gramData" v-if="optionsNew.gramData && optionsNew.gramData.length > 0" :table-data="optionsNew.gramData" />
        <steps id="stepData" v-if="optionsNew.stepData && optionsNew.stepData.length > 0" :table-data="optionsNew.stepData" />
        <div style="border-right:1px solid #888;flex:1;"></div>
      </div>
      <div class="picturesCon sopmake-preview-page__content-right" style="width:50%;padding:5px;box-sizing: border-box;">
        <img @error="onerrorFunc" :src="item.filePath || item.pictureUrl" v-for="(item, index) in picturesData" style="max-width: 100%;max-height: 100%;">
      </div>
    </div>
  </div>
</template>

<script>
import printJS from 'print-js'
import Material from './material'
import Steps from './steps'
import Device from './device'
import Program from './program'
import pageHead from './pageHead'
export default {
  components: {
    Material,
    Device,
    Program,
    Steps,
    pageHead,
  },
  props: {
    options: {
      type: Object,
      default: {}
    },
    tag: String,
    optionsNew: {
      type: Object,
      default: {}
    },
    productName: {
      type: String,
      default: ''
    },
    index: {
      type: Number,
      default: 0
    },
    length: {
      type: Number,
      default: 0
    },
  },
  data(){
    return {
    }
  },
  computed: {
    picturesData(){
      let picData = this.optionsNew.picturesData;
      if (Object.prototype.toString.call(this.optionsNew.picturesData) === "[object String]"){
        picData = JSON.parse(this.optionsNew.picturesData);
      }
      return picData;
    },
  },
  methods: {
    onerrorFunc(e){
      e.srcElement.src = '';
    },
    printClick(){
      printJS({
        printable: this.$refs.testWrap.outerHTML,
        type: 'raw-html',
      });
      /* printJS({
        printable: this.$refs.testWrap.outerHTML,
        // printable: 'testWrap',
        type: 'raw-html',
        // 继承原来的所有样式
        targetStyles: ['*'],
        style: '.testWrap { color: red; }.left{width:50%}'
      }); */
      /* printJS({
        printable: 'testWrap',
        type: 'html',
        // 继承原来的所有样式
        targetStyles: ['*'],
        onPrintDialogClose: function(){
          console.log('关闭打印');
        },
      }); */
    },
  },
}
</script>